<template>
  <el-dialog
    title="添加学员"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="632px"
    top="25vh"
    @close="close"
  >
    <el-scrollbar>
      <el-form ref="addStudent" :model="AddStudentInput" :rules="rules" class="gl_form_mini" label-position="top" label-width="120px" style="padding:0 30px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="学员姓名:" prop="name">
              <el-input v-model="AddStudentInput.name" :disabled="disinput" placeholder="请输入学员姓名" maxlength="30" type="text" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="证件号码:" prop="idCardTypeCode">
              <el-select v-model="AddStudentInput.idCardTypeCode" size="mini">
                <el-option v-for="item in dict.idCardType" :key="item.code" :label="item.value" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18" style="padding-top: 32px">
            <el-form-item prop="idCardNumber" :rules="addStudent.idCardTypeCode === 'IdCard' ? rules.idCard : rules.unIdCard">
              <el-input v-model="AddStudentInput.idCardNumber" placeholder="请输入证件号码" maxlength="30" type="text" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
    <span slot="footer" class="dialog-footer">
      <!-- 取消按钮 -->
      <el-button size="mini" @click="close()">{{ $t('button.cancel') }}</el-button>
      <!-- 编辑的保存按钮 -->
      <el-button size="mini" type="primary" :loading="addfalse" @click="add('addStudent')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { api_POST_ClubStudentStudent } from '@/extend/api/hallswaggerApi/app.js';
import { AddStudentInput } from '@/lib/form/hall/swaggerForm';
import validator from '@/lib/validate';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      disinput: false,
      addfalse: false,
      role: {},
      AddStudentInput: new AddStudentInput(),
      dialogVisible: false,
      addStudent: {
        name: '',
        idCardTypeCode: '',
        idCardNumber: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idCardTypeCode: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
        idCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkIdNumber(value, '身份证号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        unIdCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    if (this.$route.query.studentId) {
      this.AddStudentInput.name = this.$route.query.studentName;
      this.AddStudentInput.idCardTypeCode = this.$route.query.idCardTypeCode;
      this.AddStudentInput.idCardNumber = this.$route.query.idCardNumber;
    }
  },
  methods: {
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('addStudent', this.addStudent);
          console.log(this.AddStudentInput);
          this.addfalse = true;
          api_POST_ClubStudentStudent(this.AddStudentInput).then(res => {
            console.log(res);
            if (res) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              console.log(res);
              this.addfalse = false;
              this.dialogVisible = false;
              this.$parent.getStudent();
              this.$router.push({ 'name': 'StudentType', query: { 'id': res.id, 'rid': res.registerId, 'sname': 'membership' }});
            } else {
              this.addfalse = false;
              console.log(this.AddStudentInput);
              this.$router.push({ 'name': 'StudentType', query: { 'role': JSON.stringify(this.AddStudentInput) }});
            }
            // this.$router.push({ 'name': 'StudentType', query: { 'id': this.role.id, 'reid': this.role.registerId }});
          }, error => {
            this.addfalse = false;
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
          // this.close();
        } else {
          this.addfalse = false;
        }
      });
    },
    // 关闭弹窗
    close () {
      this.$router.push({ query: {}});
      this.disinput = false;
      this.addStudent = {
        name: '',
        idCardTypeCode: '',
        idCardNumber: ''
      };
      this.$nextTick(() => {
        this.$refs.addStudent.resetFields();
        this.AddStudentInput.name = '';
        this.AddStudentInput.idCardTypeCode = '';
        this.AddStudentInput.idCardNumber = '';
        this.dialogVisible = false;
      });
    }
  }

};
</script>
